<template>
	<view class="main-content">
		
		<view class="" v-if="carts.length!==0">
			<view class="out-cart"  v-for="(item,index) in carts" :key="index">
				<image class="card-image" style="width: 100px;height: 100px;" :src="item.url" mode=""></image>
				<view class="big-card">
					<view class="card-name">{{item.name}}</view>
					<view class="">商品价格:{{item.price}}</view>
					<view class="">商品数量:{{item.number}}</view>
					<view class="card-buttons">
						<button size ="mini" type="primary" @click="addCart(item.id)">+</button>
						<button size ="mini" type="primary" @click="reduceCart(item.id)">-</button>
					</view>
				</view>
			</view>
			<button class="finish-button" size="mini" type="mini" @click="finshCard">结算购物车</button>
		</view>
		
		<view class="top-image" v-if="carts.length===0">
			<image src="../../static/image/nodata.png" class="image-content" mode=""></image>
			暂无数据
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				carts:[]
			}
		},
		onShow:function(){
			this.getData();
		},
		methods: {
			async getData () {
				const res = await this.$myRuquest({
					url: '/shopping/findAll'
				})
				this.carts = res.data;
			},
			async addCart(id) {
				const res = await this.$myRuquest({
					url: '/shopping/addShop/'+id
				})
				this.getData();
				return uni.showToast({
					title: '添加购物车成功'
				})
			},
			async reduceCart(id) {
				const res = await this.$myRuquest({
					url: '/shopping/deleteShop/'+id
				})
				this.getData();
				return uni.showToast({
					title: '取消成功'
				})
			},
			async finshCard() {
				const res = await this.$myRuquest({
					url: '/order/settle/',
					mmethod: 'post'
				})
				this.getData();
				return uni.showToast({
					title: '结算购物车成功'
				})
			}
		}
	}
</script>

<style>
.main-content{
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	padding-left: 10%;
	margin-bottom: 50px;
}	
	
.out-cart{
	display: flex;
	justify-content: space-around;
	border: 1px #999999 solid;
	padding-top: 20px;
	margin-bottom: 25px;
	height: 150px;
	width: 90%;
	background-color: #FFFFFF;
}
	
.card-image{
	width: 100px;
	height: 100px;
}

.card-name{
	width: 100px;
	height: 15px;
	-webkit-line-clamp: 1;
	padding-bottom: 50rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
}

.card-buttons{
	display: flex;
	justify-content: space-around;
}


.finish-button{
	color: #C0C0C0;
	background-color:#FF3366;
	float: right;
	margin-right: 50px;
}

.top-image{
	text-align: center;
	color: #C0C0C0;
}

.image-content{
	width: 100%;
}
</style>
